﻿@model CityDTO[]
@{
    ViewBag.Title = "掌上租";
}

<div id="divCities" style="display:none;position:absolute;z-index:100;background-color:lightblue;cursor:pointer">
    <ul id="ulCities">
        @foreach (var city in Model)
        {
            <li cityId="@city.Id">@city.Name</li>
        }
    </ul>
</div>

<!--header star-->
<div class="header clearfloat">
    <div class="tu clearfloat">
        <img src="~/Content/img/index-banner.jpg" />
    </div>
    <header class="mui-bar mui-bar-nav">
        <a id="btnCities" href="javascript:void(0)">
            <p><span id="cityName">@ViewBag.cityName</span><i class="iconfont icon-iconfontarrowdown-copy"></i></p>
        </a>
        <div class="top-sch-box flex-col">
            <div class="centerflex">
                <i class="fdj iconfont icon-sousuo"></i>
                <div class="sch-txt">请输入您要搜索的内容</div>
            </div>
        </div>
    </header>
    <div class="header-tit clearfloat">
        <p class="header-num">掌上租已为<span>53789</span>用户成功租房！</p>
        <p class="header-da">轻松租房  乐享生活</p>
    </div>
</div>
<!--header end-->
<div id="main" class="mui-clearfix">
    <!-- 搜索层 -->
    <div class="pop-schwrap">
        <div class="ui-scrollview">
            <div class="poo-mui clearfloat box-s">
                <div class="mui-bar mui-bar-nav clone poo-muitwo">
                    <div class="top-sch-box flex-col">
                        <div class="centerflex">
                            <i class="fdj iconfont icon-sousuo"></i>
                            <input class="sch-input mui-input-clear" type="text" name="" id="" placeholder="请输入您要搜索的内容" />
                        </div>
                    </div>
                </div>
                <a href="javascript:;" class="mui-btn mui-btn-primary btn-back" href="#">取消</a>
            </div>
            <div class="scroll-wrap">
                <div class="mui-scroll">
                    <div class="sch-cont">
                        <div class="section ui-border-b">
                            <div class="tit">热门搜索</div>
                            <div class="tags">
                                <span class="tag">大溪地</span><span class="tag">大溪地</span><span class="tag">大溪地</span>
                                <span class="tag">大溪地</span><span class="tag">大溪地</span><span class="tag">大溪地</span>
                                <span class="tag">大溪地</span><span class="tag">大溪地</span><span class="tag">大溪地</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="cation clearfloat">
        <ul class="clearfloat">
            <li>
                <a href="~/House/Search2?typeId=12">
                    <img src="~/Content/img/fang.png" />
                    <p>整租</p>
                </a>
            </li>
            <li>
                <a href="/House/Search2?typeId=13">
                    <img src="~/Content/img/chuang.png" />
                    <p>合租</p>
                </a>
            </li>
            <li>
                <a href="/House/Search2?typeId=15">
                    <img src="~/Content/img/bao.png" />
                    <p>短租</p>
                </a>
            </li>
            <li>
                <a href="/House/Search2?typeId=16">
                    <img src="~/Content/img/lou.png" />
                    <p>写字楼</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="~/Content/img/map.png" />
                    <p>地图找房</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="~/Content/img/people.png" />
                    <p>我是房东</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="~/Content/img/woshou.png" />
                    <p>加盟</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="~/Content/img/self.png" />
                    <p>生活服务</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="recom clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>热门房源推荐</p>
        </div>
        <div class="content clearfloat box-s">
            @foreach (var house in (HouseDTO[])ViewBag.RecommendHouses)
            {
                <div class="list clearfloat fl box-s">
                    <a href="/House/@(house.Id).html">
                        <div class="tu clearfloat">
                            <span></span>
                            <img src="@house.FirstThumbUrl" />
                        </div>
                        <div class="right clearfloat">
                            <div class="tit clearfloat">
                                <p class="fl">@house.CommunityName</p>
                                <span class="fr">@house.MonthRent<samp>元/月</samp></span>
                            </div>
                            <p class="recom-jianjie">@house.RoomTypeName   |  @(house.Area)m²  |  @house.DecorateStatusName</p>
                            <div class="recom-bottom clearfloat">
                                <span><i class="iconfont icon-duihao"></i>随时住</span>
                                <span><i class="iconfont icon-duihao"></i>家电齐全</span>
                            </div>
                        </div>
                    </a>
                </div>
            }
        </div>
    </div>
</div>

<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li class="active">
            <a href="/Home/Index">
                <i class="iconfont icon-shouyev1"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-chuzuwo"></i>
                <p>我要出租</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-richengbiao"></i>
                <p>看房日程</p>
            </a>
        </li>
        <li>
            <a href="/User/Index">
                <i class="iconfont icon-gerenzhongxin"></i>
                <p>个人中心</p>
            </a>
        </li>
    </ul>
</footer>

@section FooterScript
{
    <script src="~/Content/js/swiper.jquery.min.js"></script>
    <link rel="stylesheet" href="~/Content/css/swiper.min.css">
    <!--搜索点击效果-->
    <script>
	    $(function () {
	        var banner = new Swiper('.banner',{
	            autoplay: 5000,
	            pagination : '.swiper-pagination',
	            paginationClickable: true,
	            lazyLoading : true,
	            loop:true
	        });

	         mui('.pop-schwrap .sch-input').input();
	        var deceleration = mui.os.ios?0.003:0.0009;
	         mui('.pop-schwrap .scroll-wrap').scroll({
	                bounce: true,
	                indicators: true,
	                deceleration:deceleration
	        });
	        $('.top-sch-box .fdj,.top-sch-box .sch-txt,.pop-schwrap .btn-back').on('click',function () {
	            $('html,body').toggleClass('holding');
	            $('.pop-schwrap').toggleClass('on');
	            if($('.pop-schwrap').hasClass('on')) {;
	                $('.pop-schwrap .sch-input').focus();
	            }
	        });
	        $("#btnCities").click(function () {
	            var left = $(this).offset().left;
	            var top = $(this).offset().top;
	            var height = $(this).height();
	            var width = $(this).width();
	            $("#divCities").toggle().css("left", left).css("top", top + height).css("width", width);
	        });

	        $("#ulCities li").click(function () {
	            var cityId = $(this).attr("cityId");
	            var cityName = $(this).text();
	            $.ajax({
	                url: "/Home/SwitchCityId", type: "post", dataType: "json",
	                data: { cityId: cityId },
	                success:function(res)
	                {
	                    //var cityName = $(this).text();不能这样写
	                    //$("#divCities").hide();
	                    //$("#cityName").text(cityName);
	                    location.reload();
	                },
	                error:function()
	                {
	                    alert("网络错误");
	                }
	            });
	        });
	    });
    </script>

}




